<template>
  <div class="container">
    <div class="head-image">
      <el-upload action="string" list-type="text" :http-request="UploadImage"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :show-file-list="false"
        multiple="true">
        <el-avatar :size="80" :src="userVo.headImage"></el-avatar>
      </el-upload>
    </div>
    <van-cell title="平台等级" is-link size="large" :value="userVo.level" />
    <van-cell title="昵称" is-link size="large" :value="userVo.nickName" @click="checkCell(1)" />
    <van-cell title="性别" is-link size="large" :value="userVo.sex" @click="checkCell(2)" />
    <van-cell title="生日" is-link size="large" :value="dateFormat1(userVo.birthdate)"
      @click="checkCell(3)" />
    <van-cell title="邮箱" is-link size="large" :value="userVo.email" @click="checkCell(4)" />
    <van-cell title="个性简介" is-link value="" size="large" :label="userVo.personality"
      @click="checkCell(5)" />

    <van-cell title="手机号" is-link size="large" :value="phoneHide1(userVo.phone)"
      @click="checkCell(6)" />
    <van-cell title="账号与密码" is-link size="large" @click="checkCell(7)" />
    <van-cell title="所在地址" is-link size="large" value="北京市/北京市/东城区" @click="placeShow=!placeShow" />
    <van-area v-show="placeShow" item-height="30px" title="地址" :area-list="areaList" :value="place"
      @cancel="placeCancel" @confirm="placeConfirm" />
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" :before-close="handleClose">
      <!-- 昵称 -->
      <el-input v-show="dialogTitle == '昵称' " v-model="updateUser.nickName" size="large"
        placeholder="昵称:1-20字符" />
      <!-- 性别 -->
      <el-radio-group v-show="dialogTitle =='性别'" v-model="updateUser.sex">
        <el-radio label="男">男</el-radio>
        <el-radio label="女">女</el-radio>
      </el-radio-group>
      <!-- 生日 -->
      <div v-show="dialogTitle == '生日'">
        <el-date-picker v-model="updateUser.birthdate" placeholder="生日" type="date"
          value-format="YYYY-MM-DDThh:mm:ss" size="large" />
      </div>
      <!-- 邮箱 -->
      <el-input v-show="dialogTitle == '邮箱'" v-model="updateUser.email" size="large"
        placeholder="请输入邮箱格式" />
      <!-- 个性简介 -->
      <el-input v-show="dialogTitle == '个性简介'" type="textarea" :rows="3" placeholder="请输入简介"
        v-model="updateUser.personality">
      </el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateInfo()">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { Cell, Area } from 'vant';
import { ElMessage } from 'element-plus';
import { areaList } from '@vant/area-data';
import { dateFormat, phoneHide } from '../../utils/index';
export default {
  data () {
    return {
      date: '',
      show: false,
      areaList,
      place: "",
      placeShow: false,
      userVo: {},
      dialogVisible: false,
      dialogTitle: "基础信息",
      updateInput: "",
      updateSex: "男",
      updateItem: "",
      updateUser: {}
    }
  },
  components: {
    VanCell: Cell, VanArea: Area,
  },
  mounted () {
    this.getUserVo();
  },
  methods: {
    da () {
      this.show = true;
    },
    checkCell (num) {
      if (num == 1) {
        this.dialogTitle = "昵称";
      }
      if (num == 2) {
        this.dialogTitle = "性别";
      }
      if (num == 3) {
        this.dialogTitle = "生日";
      }
      if (num == 4) {
        this.dialogTitle = "邮箱";
      }
      if (num == 5) {
        this.dialogTitle = "个性简介";
      }
      if (num == 6) {
        this.$router.push("/updatephone/" + this.userVo.phone);
      }
      if (num == 7) {
        this.$router.push("/updatepwd");
      }
      this.dialogVisible = true;
    },
    updateInfo () {
      this.$axios.put("/user/update", this.updateUser).then(res => {
        if (res.flag) {
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
          this.dialogVisible = false;
        }
      })
    },
    getUserVo () {
      this.$axios.get("/user/uservo").then(res => {
        if (res.flag) {
          this.userVo = res.data;
          this.updateUser = res.data;
        }
      })
    },
    UploadImage (data) {
      var forms = new FormData();
      forms.append("file", data.file);
      this.$axios({
        method: 'put',
        url: '/user/headimage',
        data: forms,
      }).then((res) => {
        if (res.flag) {
          data.onSuccess();
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
          this.$router.go(0);
        }
      })
    },
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    dateFormat1 (date) {
      return dateFormat(date, 3);
    },
    phoneHide1 (phone) {
      return phoneHide(phone);
    },
    onConfirm (date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    placeConfirm (e) {
      console.log(e);
    },
    placeCancel () {
      this.placeShow = false
    }
  }
}
</script>

<style scoped>
.container {
}
.head-image {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}
</style>